<template>
    <h2>等级显示</h2>
    <span>等级名称</span>
    <input type="text" v-model="state.levelname">
    <input type="button" value="查询" @click="getlist">
    <table border="1">
        <thead>
            <tr>
    <td>等级名称</td>
    <td>最低价</td>
    <td>最高级</td>
    <td>折扣</td>
    <td>成长值</td>
    <td>翻倍</td>
    <td>操作</td>
</tr>
        </thead>
        <tbody>
    <tr v-for="item in list">
    <td>{{item.levelName}}</td>
    <td>{{item.lowMoney}}</td>
    <td>{{item.highMoney}}</td>
    <td>{{item.zhenko}}</td>
    <td>{{item.grow}}</td>
    <td>{{item.speed}}</td>
    <td><input type="button" value="删除" @click="removed(item.id)">
        <input type="button" value="修改"  @click="Updmem(item.id)">
        <input type="button" value="注销" >
    </td>
</tr>
        </tbody>
    </table>
    <span>当前第{{state.pageindex}}</span>页
    <span>有{{state.pagesize}}</span>条
    <span>共{{totalcount}}</span>条
    <span>共{{totalpage}}</span>页
        <input type="button" value="首页" @click="gopage('a')">
        <input type="button" value="上一页" @click="gopage('b')">
        <input type="button" value="下一页" @click="gopage('c')">
        <input type="button" value="尾页" @click="gopage('d')">
        <input type="text" v-model="page">
        <input type="button" value="跳转" @click="gopage(page)">
        <select v-model="state.pagesize" @change="change">
            <option value="1">==1==</option>
            <option value="2">==2==</option>
            <option value="3">==3==</option>
            <option value="4">==4==</option>
        </select>
</template>

<script setup lang="ts">
import axios from "axios";
import {onMounted,toRefs,reactive} from 'vue';
import {useRouter} from 'vue-router';
const router = useRouter();

const data:any=reactive({
    state:{
        levelname:'',
        pageindex:1,
        pagesize:2
    },
    list:[],
    totalcount:0,
    totalpage:0,
    page:1,
    po:[1,2,3,4]//页容量数组
})
const {state,list,totalcount,totalpage,page,po}=toRefs(data);
onMounted(()=>{
    getlist();
})

//下拉框页容量
const change=()=>{
    state.value.pageindex=1;
    page.value=1;
    getlist();
}


//分页
//case情况
//pageindex是页容量
const gopage=(str:any)=>{
switch(str){
    case 'a':
        console.log('回到首页');
        if(state.value.pageindex==1)
        {
            alert('已经到第一页了');
            return;
        }
        state.value.pageindex=1;
        break;
    case 'b':
        if(state.value.pageindex==1)
        {
            alert('已经到第一页了');
            return;
        }
        state.value.pageindex--;
        break;
    case 'c':
        if(state.value.pageindex==totalpage.value)
        {
            alert('已经是最后一页了');
            return;
            
        }
        state.value.pageindex++;
        break;
    case 'd':
        if(state.value.pageindex==totalpage.value)
        {
            alert('已经是最后一页了');
            return;
        }
        
     state.value.pageindex=totalpage.value;
     console.log('已到尾页');
        break;
    case str:
    if(str=="")
                {
                    alert('页码不能为空');
                    return;
                }
                if(isNaN(str)==true)
                {
                    alert('只能为数字');
                    return;
                }
                if(str>totalpage.value||str<1)
                {
                    alert('只能是1到'+totalpage.value+'之间的数字');
                    return;
                }
                state.value.pageindex=str;
        break;
}
getlist();
}


//显示
//console.log是在网页打印信息
const getlist=()=>{
    console.log(state.value);
    axios({
        url:'/api/Member/ShowOne',
        method:'get',
        params:state.value
    })
    .then(res=>{
        console.log(res);
        list.value=res.data.data;
        totalcount.value=res.data.totalcount;
        totalpage.value=res.data.totalpage;
    })
    .catch(err=>{
        console.log(err);
    })
}

//删除
const removed=(id:any)=>{
    var f=confirm('确认要删除吗？');
    if(f==true)
    {
        axios({
        url:'/api/Member/DelLevId',
        method:'delete',
        params:{id:id}
    })
    .then(res=>{
        console.log(res);
        if(res.data.data==1)
        {
            alert('删除成功');
            getlist();
        }
        else
        {
            alert('删除失败');
            return;
        }
    })
    .catch(err=>{
        console.log(err);
    })
    }
    
}






//修改
const Updmem=(id:any)=>{
    router.push({
        path:'/maean/Upd',
        query:{
            id:id
        }
    })
}
</script>